<template>
	<div class="home">

		<div class="nav">
			<div class="nav_left">
				<div class="logo">
					<img src="../assets/TURAWLOGO.png" alt="">
				</div>
				<el-tabs class="navbar" v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="首页" name="Homepage"></el-tab-pane>
					<el-tab-pane label="摄影图" name="Photos"></el-tab-pane>
					<el-tab-pane label="矢量图" name="Svgs"></el-tab-pane>
					<el-tab-pane label="搜索" name="Search"></el-tab-pane>

				</el-tabs>
			</div>
			<div class="nav_right">
				<ul class="login">
					<li>
						<div>登录</div>
						<div>注册</div>
					</li>
				</ul>
			</div>
		</div>



		<router-view></router-view>

	</div>


</template>

<script>
	// @ is an alias to /src


	export default {

		name: 'Home',


		data() {
			return {
				activeName: 'Homepage',
			};
		},
		watch:{
			$route:{
				handler(val){
					this.activeName = val.name;
				},
				immediate:true
			}
		},
		methods: {
			handleClick(tab) {
				console.log(this.activeName);
				
				this.$router.push({
					name: tab.name,
				})
			}
		},
		computed:{
		}
	}
</script>
<style lang="scss" scoped>
	.home {
		.nav {
			// background-color: red;
			display: flex;
			justify-content: space-between;

			.nav_left {
				display: flex;
				align-items: center;
				height: 62px;
				.logo {
					height: 62px;
					margin-left: 35px;

					img {
						height: 62px;
					}
				}

				.navbar {
					display: flex;
					align-items: center;
					margin-left: 60px;
					font-family: "microsoft yahei";
					.el-tabs_header {
						height: 62px !important;

						.el-tabs__nav-wrap {}
					}
				}
			}
			.nav_right{
				.login{
					width: 150px;
					background-color: #49c5b6;
					height: 62px;
					line-height: 62px;
					color: white;
					// border-radius: 8px;
					li{
						display: flex;
						justify-content: space-around;
					}
				}
			}
		}
	}

	::v-deep .el-tabs__nav-wrap::after {
		width: 0%;
	}

	::v-deep .el-tabs__header {
		margin: 0 0 0;
	}

	::v-deep .el-tabs__item {
		padding: 0 0;
		padding-left: 60px;
	}

	::v-deep .el-tabs__item.is-top:nth-child(2) {
		padding-left: 60px;
	}

	::v-deep .el-tabs__nav {
		height: 62px;
		line-height: 62px;
	}
</style>
